import { _decorator, Component, Node, Mask, v3, UITransform, Vec3, Label } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('GuidelineComponent')
export class GuidelineComponent extends Component {
    @property(Mask)
    mask: Mask = null;  //遮罩

    @property(Node)
    background: Node = null;  //背景

    @property(Node)
    finger: Node = null;  //手指

    @property(Label)
    guideLabel: Label = null;  //文本说明

    start() {
        this.hide();
    }

    // 显示引导组件
    public show(target: Node, text: string) {
        const targetPos: Vec3 = v3();
        target.getWorldPosition(targetPos);  //获取目标节点的世界位置
        this.mask.node.setWorldPosition(targetPos);  //设置遮罩的世界位置
        
        // 仅更新引导文本信息
        this.guideLabel.string = text;

        // 设置遮罩的大小与目标节点一致
        const maskTransform: UITransform = this.mask.node.getComponent(UITransform);
        maskTransform.setContentSize(target.getComponent(UITransform).contentSize);
        this.mask.node.active = true;
        
        // 设置背景的位置
        this.background.setPosition(maskTransform.convertToNodeSpaceAR(this.node.worldPosition));

        // 设置手指的位置
        this.finger.setWorldPosition(v3(targetPos.x, targetPos.y - this.finger.getComponent(UITransform).height * 0.6, 0));
        this.finger.active = true;
    }

    // 隐藏引导组件
    public hide() {
        this.mask.node.active = false;
        this.finger.active = false;
        this.guideLabel.string = "";
    }
}


